<template>
<!--文章导引-->
  <div style="float: left;margin-left: 200px">
    <div v-for="(article,i) in articles" class="card">

      <el-card class="box-card" style="overflow: visible;" shadow="hover" >
        <router-link
            :to="{name:'detail',
              path:'/detail',
              query:{articleId:article.id,
                     userId:article.userId,
                     current:query.current
        }}">
          <div class="image">
            <el-image :src="article.articleCover" fit="cover" style="width: 130px;height: 130px;"/>
          </div>
          <div class="limit-text-length" >
            <el-link style="font-size: 15px;margin-left: 0px">{{ article.articleTitle }}
            </el-link><span style="float: right">{{ article.createTime }}</span>
            <el-divider/>

            <div v-bind:class="{active:isActive[i],'no-active':!isActive[i]}" @mouseenter="isActive[i]=false" @mouseout="isActive[i]=true" >
              {{ article.articleIntroduction }}
            </div>

          </div>
        </router-link>
        <!--点赞和点踩-->
        <div style="float: left; height: 30px; margin-top: 10px;width: 50%;margin-left: 40px">

          <svg-icon v-if="article.isLiked===0"  @click="countadd(article.id,1)" style="width: 30px;height: 30px" icon='点赞'/>
          <svg-icon v-if="article.isLiked===1"  @click="countadd(article.id,2)" style="width: 30px;height: 30px" icon='点赞亮'/>
          <scan class="foot-font" v-if="article.isLiked===0">{{article.liked}}点赞</scan>
          <scan class="foot-font" v-if="article.isLiked===1" style="color: #25a4bb">{{article.liked}}点赞</scan>

          <svg-icon v-if="article.isUnliked==0" @click="countadd(article.id,3)" style="width: 30px;height: 30px" icon='踩'/>
          <svg-icon v-if="article.isUnliked===1" @click="countadd(article.id,4)" style="width: 30px;height: 30px" icon='已踩'/>
          <scan class="foot-font" v-if="article.isUnliked==0">{{article.unliked}}踩</scan>
          <scan class="foot-font" v-if="article.isUnliked==1" style="color: #333333">{{article.unliked}}踩</scan>

        </div>

      </el-card>
      <!--管理员删除和置顶操作-->
      <div style="margin-right: 0px;width:30%;" v-if="store.getters.GET_ROOT=='root'">
        <el-popconfirm
            confirm-button-text="删除"
            cancel-button-text="取消"
            :icon="InfoFilled"
            icon-color="#626AEF"
            title="确定要删除吗？"
            @confirm="deleteComment(article)"
            @cancel="cancelEvent"
        >
          <template #reference>
            <el-button type="danger">删除</el-button>
          </template>
        </el-popconfirm>
        <el-button type="primary" v-if="article.isTop==0" @click="setTop(article)">置顶</el-button>
        <el-button type="primary" v-if="article.isTop==1" @click="cancelTop(article)">取消置顶</el-button>

      </div>
    </div>
  </div>
<!--   文章分类-->
  <div
      style="
      float: left;
      width: 300px;
      height: 500px;
      margin: 50px 0 100px 0;
      border-radius: 20px;
      border: 2px solid #b0b0b0;padding: 20px 10px 10px 10px"
  >

    <span class="foot-font" style="margin-left: 20px">文章分类</span>
    <el-divider />
    <el-button
        size="large"
        style="margin: 10px 10px 20px 30px;width: 100px;border-width: 2px"
        @click="cpageByCategory(0)"
        round>全部</el-button>
    <el-button
        size="large"
        style="margin: 10px 10px 20px 30px;width: 100px;border-width: 2px"
        v-for="category in categorys"
        @click="cpageByCategory(category.id)"
        round>{{category.categoryName}}</el-button>
  </div>
<!--  页脚分页组件-->
  <div class="foot">
    <el-pagination
        background
        layout="prev, pager, next"
        v-model:total="total"
        v-model:page-size="query.pagesize"
        v-model:current-page="query.current"
        @current-change="cpage(query.categoryId)"
        @next-click="cpage(query.categoryId)"
    />

  </div>

</template>

<script setup>
import {ref, reactive,onBeforeMount, onMounted,inject,onUnmounted} from "vue-demi";
import request from "@/utils/request";
import {useRoute} from "vue-router";
import store from "@/store";
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'
//一页最多三个预览模块
const isActive = ref([true,true,true])
const timer = ref(null);
const route = useRoute()
const reload = inject("reload")
const categorys = ref([])

let query = reactive({
  current: 1,
  pagesize: 3,
  categoryId: 0
})
let current
if(route.query.current!=null){
   current = parseInt(route.query.current)
  query.current = current
}

let articles = ref([])
let total = ref(5)
onMounted(async () => {
  //获取所有文章
  let result = await request.get("article/getarticlelist", query)
  let data = result.data
  if (data.code == 200) {

    total.value = data.data.total
    articles.value = data.data.articles
  } else {
    console.log("文章列表获取失败")
  }
  timer.value = setInterval(async () => {
    await cpage(query.categoryId)
  }, 5000);

  await getArticleCategory()
})
//组件卸载后清空计时器
onUnmounted(() => {
  clearInterval(timer.value);
});

//获取文章分类
const getArticleCategory = async ()=>{
  let result = await request.get("article/category")
  let data = result.data
  if(data.code === 200){
    categorys.value = data.data
    console.log(data.msg)
  }else{
    console.log(data.msg)
  }
}
//监控页面变化，并相应新的数据
const cpage = async (categoryId) => {
  query.categoryId = categoryId
  let result = await request.get("article/getarticlelist", query)
  let data = result.data
  if (data.code == 200) {
    total.value = data.data.total
    articles.value = data.data.articles
  } else {
    console.log("文章列表获取失败")
  }
}
//删除评论
const deleteComment = async (article)=>{
  let result = await request.get("deletearticle",article)
  let data = result.data
  if(data.code === 200){
    console.log(data.code+"  "+data.msg)
  }else{
    console.log(data.code+"  "+data.msg)
  }
  open(data.msg)
  reload()
}
//弹出删除消息
const open = (msg) => {
  ElMessage({
    message: msg,
    type: 'success',
  })
}

//取消删除操作
const cancelEvent = () => {
  console.log('cancel!')
}
//置顶
const setTop =async (article)=>{
  article.isTop = 1
  let result = await request.post("articles/settop",article)
  let data = result.data
  if(data.code===200){
    console.log(data.code+"  "+data.msg)
    open(data.msg)
    reload()
  }else {
    console.log(data.code+"  "+data.msg)
    open(data.msg)
  }
}
//取消置顶
const cancelTop =async (article)=>{
  article.isTop = 0
  let result = await request.post("articles/canceltop",article)
  let data = result.data
  if(data.code===200){
    console.log(data.code+"  "+data.msg)
    open(data.msg)
    reload()
  }else {
    console.log(data.code+"  "+data.msg)
    open(data.msg)
  }
}

//点赞
const countadd =async (id,status)=>{

  let result = await request.get('liked?id='+id+'&status='+status)
  let data = result.data
  if(data.code === 200){
    open(data.msg)
    await cpage(query.categoryId)
  }else {
    open(data.msg)
    console.log(data.msg)
  }
}
//按分类查找文章
const cpageByCategory = async (categoryId)=>{
  query.current = 1
  await cpage(categoryId)
}
</script>
<style>
.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.box-card {
  margin: 1%;
  width: 900px;
}

.card {
  width: 80%;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
  align-items: center;
  padding: 10px;
}

.foot {
  align-items: center;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  flex-flow: column;
}

.image {
  float: left;
  padding: 1%;
}

.limit-text-length {
  overflow: visible;
  float: left;
  width: 75%;
  height: 100px;
  /*text-overflow: ellipsis;*/
  /*display: -webkit-box;*/
  /*-webkit-box-orient: vertical;*/
  /*-webkit-line-clamp: 3;*/
  /*white-space: pre-line;*/
  margin-left: 40px;
}
.foot-font{
  font-size: 20px;
  margin-right: 20px;
}

.active{
  color: #b0b0b0;overflow: hidden;height: 27px;padding-top: 5px
}
.no-active{
  border-radius: 20px;
  position: relative;
  top:-70px;
  bottom:-200px;
  right: 0;
  left: 0;
  background-color: #707070;
  opacity: 0.9;
  color: white;
  width: 100%;
  min-height: 100px;
  margin: auto;
  padding-left: 20px;
  padding-top: 20px;
  padding-bottom: 20px;
  float: left;
  line-height: 30px;
  transform:scale(1.1);
}
</style>